<template>
	<view>
		<headerinfo></headerinfo>
		<u-navbar title="添加家庭事件" :placeholder="true" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
			:titleStyle="titleStyle"></u-navbar>

		<view class="form">
			<view class="list">
				<div class="form_label">
					<span class="red">*</span>
					事件名称
				</div>
				<input type="text" v-model="form.title" placeholder="请输入事件名称">
			</view>
			<view class="list">
				<div class="form_label">
					<span class="red">*</span>
					日期
				</div>
				<input type="text" @click="dateVisible1 = true" disabled v-model="form.date" placeholder="请选择日期">
			</view>
			<view class="list">
				<div class="form_label">
					<span class="red">*</span>
					开始时间
				</div>
				<input type="text" @click="timeVisible = true" disabled v-model="form.startTime" placeholder="请输入开始时间">
			</view>
			<view class="list">
				<div class="form_label">
					结束时间
				</div>
				<input type="text" @click="timeVisible2 = true" disabled v-model="form.endTime" placeholder="选填">
			</view>
			<view class="list" v-if="!form.docId">
				<div class="form_label">
					家庭
				</div>
				<input type="text" @click="familyDia = true" disabled :value="familyName?familyName:'请选择'">
			</view>
			<view class="list" v-if="!form.docId">
				<div class="form_label">
					家庭人物
				</div>
				<input type="text" @click="userlistDia = true" disabled :value="checkedUserName?checkedUserName:'请选择'">
			</view>
			<view class="list">
				<div class="form_label">
					重复事件
				</div>
				<input type="text" @click="selectorVisible = true" disabled v-model="chongfuName" placeholder="选填">
			</view>

			<view class="list">
				<div class="form_label">详细内容</div>
				<textarea v-model="form.remark" placeholder="选填"></textarea>
			</view>
			<view class="btns" v-if="form.docId">
				<view class="createBtn" @click="createFirstSubmit()">保存</view>
				<view class="createBtn" style="background-color: #a1a1a1;" @click="del()">删除</view>
			</view>
			<view class="createBtn" v-else @click="createFirstSubmit()">创建</view>
		</view>
		<w-picker :visible.sync="dateVisible1" mode="date" startYear="1970" endYear="2099" :current="false" fields="day"
			@confirm="onConfirm($event)" :disabled-after="false" ref="date1"></w-picker>
		<w-picker :visible.sync="timeVisible" mode="time" :current="true" @confirm="onConfirm2" ref="time"></w-picker>
		<w-picker :visible.sync="timeVisible2" mode="time" :current="true" @confirm="onConfirm3" ref="time"></w-picker>

		<u-picker :show="familyDia" @cancel="familyDia = false" :columns="familylist" keyName="label"
			@confirm="familyConfim"></u-picker>

		<u-popup :show="userlistDia" >
			<selectpicker @closeDia="userlistDia = false" @checkedUser="checkedUser" :list="userList" @close="userlistDia = false"></selectpicker>
		</u-popup>

		<w-picker :visible.sync="selectorVisible" mode="selector" default-type="name" :default-props="defaultProps"
			:options="selectorList" @confirm="onConfirm4($event)" ref="selector"></w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				selectorVisible: false,
				chongfuName: '',
				defaultProps: {
					label: "name",
					value: "id"
				},
				selectorList: [{
					name: "每天",
					id: "day"
				}, {
					name: "每月",
					id: "month"
				}, {
					name: "每年",
					id: "year"
				}],
				selectorVisible: false,
				dateVisible1: false,
				timeVisible: false,
				timeVisible2: false,
				bgColor: '#de4849',
				userlistDia: false,
				familylist: [],
				userList: [],
				checkedUserName: '',
				familyDia: false,
				familyName: '',
				titleStyle: {
					color: '#fff'
				},

				form: {
					date: '',
					docId: '',
					endTime: '',
					familyId: '',
					location: '',
					remark: '',
					repeat: '',
					shareUsernames: '',
					startTime: '',
					title: '',
				},

			};
		},

		onLoad(e) {
			if (e.data) {
				this.form = JSON.parse(e.data)

				if (this.form.repeat == 'day') {
					this.chongfuName = '每天'
				} else if (this.form.repeat == 'month') {
					this.chongfuName = '每月'
				} else {
					this.chongfuName = '每年'
				}
				console.log(this.form)
			}
			this.getMyfamilyData()
		},
		methods: {
			checkedUser(e) {
				console.log(e)
				this.userlistDia = false
				if (e.length == 0) {
					return
				}
				this.form.shareUsernames = []
				this.checkedUserName = ''
				let arr = []
				e.forEach(item => {
					this.form.shareUsernames.push(item.val)
					arr.push(item.name)
				})

				this.checkedUserName = arr.toString()

			},
			familyConfim(e) {
				console.log(e)
				this.familyName = e.value[0].label
				this.form.familyId = e.value[0].familyId
				this.familyDia = false
				this.getFamUser()
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '是否确认删除该纪念日',
					success: (res) => {
						if (res.confirm) {
							let data = {
								docId:this.form.docId,
								repeat:this.form.repeat
							}
							this.$api.calendardelete(data).then(res=>{
								this.$Show.show('删除成功');
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							})
						} 
					}
				});
			},
			getFamUser() {
				let data = {
					familyId: this.form.familyId
				}
				this.$api.queryFamilyMember(data).then(res => {
					console.log(res)

					let list = []

					if (res.list.length > 0) {
						res.list.forEach(item => {
							list.push({
								name: item.nickname,
								val: item.id,
								phone: item.phone,
								checked: false
							})
						})
					}


					this.userList = list
				})
			},
			getMyfamilyData() {

				this.$api.myFamily().then(res => {
					let familylist = [];
					uni.setStorageSync('myFamilyIndexs', []);
					if (res.familyInfo) {
						for (let i in res.familyInfo) {
							familylist.push({
								familyId: i,
								family: res.familyInfo[i].family
							});
						}
						if (familylist.length > 0) {
							familylist.forEach((item, index) => {
								console.log(item);
								item.label = item.family.familyName;
								item.id = item.familyId;

							});
						}

						console.log(familylist);
						this.familylist.push(familylist)

					}
				});
			},
			onConfirm(e) {
				console.log(e)
				this.form.date = e.result
			},
			onConfirm2(e) {
				console.log(e)
				this.form.startTime = e.result
			},
			onConfirm3(e) {
				console.log(e)
				this.form.endTime = e.result
			},
			onConfirm4(e) {
				console.log(e)
				this.form.repeat = e.value
				this.chongfuName = e.result
			},
			createFirstSubmit() {
				if (this.form.title == '') {
					return this.$Show.show('纪念日名称不能为空');
				}

				if (this.form.date == '') {
					return this.$Show.show('日期不能为空');
				}

				if (this.form.startTime == '') {
					return this.$Show.show('开始时间不能为空');
				}

				this.$api.calendarupsert(this.form).then(res => {
					let str = '创建成功'
					if (this.form.docId) {
						str = '修改成功'
					}
					this.$Show.show(str);
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				});


			},
		}
	};
</script>


<style lang="scss">
	.form {
		padding: 20rpx;
		box-sizing: border-box;

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.createBtn {
				width: 330rpx;
			}
		}

		.list {
			margin-bottom: 40rpx;
		}

		.form_label {
			margin-bottom: 10rpx;
			font-size: 28rpx;
		}

		.red {
			color: red;
		}

		input {
			border: 1px solid #eee;
			border-radius: 10rpx;
			padding: 0 20rpx;
			height: 80rpx;
			font-size: 30rpx;
			width: 100%;
		}

		textarea {
			border: 1px solid #eee;
			border-radius: 10rpx;
			padding: 20rpx;
			height: 300rpx;
			font-size: 30rpx;
			width: 100%;
		}

		.createBtn {
			width: 100%;
			height: 90rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			justify-content: center;
			box-sizing: border-box;
			background-color: #de4849;
			color: #fff;
		}

	}
</style>